<template>
  <div>
    常用的指令的学习： {{text}}
    输入：<input type="text"
           v-model="text" />
    <ul>
      <li v-for="person in list"
          :key="person.name">
        {{person.name}}
      </li>
    </ul>
    ============================================================
    <pre>
          *  v-text  是元素innertext 只能在双标签中使用
          *  v-html  是元素innerhtml 不能包含 <!--{{text}}-->
          *  v-if  元素是否移除或者插入
          *  v-show  元素是否显示或者隐藏
          *  v-model  双向数据绑定，v-bind是单向数据绑定（内存js改变影响页面）
    </pre>
    1、v-text
    <span v-text="text"></span>
    <input type="text"
           name=""
           v-text="text" />
    <hr />
    2、v-html
    <span v-html="html"></span>
    <hr>

    3、 v-if
    <div v-if="isShow"
         class="a"></div>

    4、 v-show
    <div v-show="isShow"
         class="b"></div>
    <hr>
    5、 v-model
    <input type="text"
           v-model="mTest">
    <br>
    {{mTest}}
    <br>
    给下面的input的value赋值用v-bind:value
    <input type="text"
           v-bind:value="mTest">

  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '我是v-text的东西',
      html: `
      <ul>
      <li>哈哈</li>
      <li>呵呵</li>
      </ul>
      `,
      isShow: false,
      mTest: '哈哈',
      list: [{
        name: 'jack'
      }, {
        name: 'lose'
      }]
    }
  },
  components: {

  }
}

</script>

<style>
.a {
  height: 100px;
  background-color: red;
}
.b {
  height: 100px;
  background-color: green;
}
</style>
